<template>
  <div class="div4">
<!--第一部分-->
    <div class="div1">
      <h1>探途</h1>
    </div>
<!--第二部分-->
    <div class="div2">
      <van-grid :border="false" :column-num="1">
        <van-grid-item>
          <van-image
              src="https://ts1.cn.mm.bing.net/th/id/R-C.c5d438967b4bbd84e56953fa67d8b9d4?rik=aeEDKRprulRnPA&riu=http%3a%2f%2fs8.rr.itc.cn%2ff%2fwapChange%2f20154_17_23%2fa5812y1767017489520.gif&ehk=W9Tj%2bb%2braQ5NQ%2fHOqWB8%2b93Py3Kr2zjZi5TPC9ns%2bP0%3d&risl=&pid=ImgRaw&r=0"
          />
        </van-grid-item>
      </van-grid>
    </div>
<!--第三部分-->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <div class="div3">
          <van-swipe-item>
            <h1>探索未知<br>途见不凡</h1>
            <lable>探途是一款旅行app，绝对好使</lable>
          </van-swipe-item>
        </div>
        <div class="div3">
          <van-swipe-item>
            <h1>行以致远<br>见所未见</h1>
            <lable>在这里你可以找到世界上所有美丽的景点，非常的nice</lable>
          </van-swipe-item>
        </div>
        <div>
          <van-swipe-item>
            <h1>良辰美景<br>与你共赏</h1>
            <lable>快开始你的旅途吧</lable>
            <div>
              <van-button round type="primary" size="large" @click="tz()">立即开启</van-button>
            </div>
          </van-swipe-item>
        </div>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainView",
  data(){
    return{

    }
  },methods:{
      tz(){
        this.$router.push("/login");
      }
  }
}
</script>

<style scoped>
.div1{
  margin-top: 50px;
}
.div2{
  margin-left: 25%;
  width: 50%;
  height: 50%;
}
.my-swipe .van-swipe-item {
  color: #2c3e50;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  background-color: #ffeded;
}
</style>